<template>
  <div>
    <div id="price">
      <div style="background-color:  rgb(252, 227, 2)">价格</div>
      <br />
      <el-radio-group v-model="radio1" @change="CarPriceChange">
        <el-radio label="1" id="inputPrice">
          <span>不限</span>
        </el-radio>
        <br />
        <el-radio label="2" id="inputPrice">
          <span>小于200</span>
        </el-radio>
        <el-radio label="3" id="inputPrice">
          <span>200-500</span>
        </el-radio>
        <el-radio label="4" id="inputPrice">
          <span id="lastSpan">500以上</span>
        </el-radio>
      </el-radio-group>
    </div>
    <div id="outPut">
      <p style="background-color:  rgb(252, 227, 2)">排量</p>
      <br />
      <el-radio-group v-model="radio2" @change="CarOutputChange">
        <el-radio label="1" id="inputOutput">
          <span>不限</span>
        </el-radio>
        <br />
        <el-radio label="2" id="inputOutput">
          <span>1.5以下</span>
        </el-radio>
        <el-radio label="3" id="inputOutput">
          <span>1.6-2.5</span>
        </el-radio>
        <el-radio label="4" id="inputOutput">
          <span id="lastSpan">2.6以上</span>
        </el-radio>
      </el-radio-group>
    </div>
    <div id="brand">
      <p style="background-color: rgb(252, 227, 2)">品牌</p>
      <ul id="carBrand">
        <li @click="brand='马自达',send()">马自达</li>
        <li @click="brand='沃尔沃',send()">沃尔沃</li>
        <li @click="brand='雪佛兰',send()">雪佛兰</li>
        <li @click="brand='传祺',send()">传祺</li>
        <li @click="brand='吉利',send()">吉利</li>
        <li @click="brand='悦达起亚',send()">悦达起亚</li>
        <li @click="brand='别克',send()">别克</li>
        <li @click="brand='本田',send()">本田</li>
        <li @click="brand='东风标致',send()">东风标致</li>
      </ul>
    </div>
  </div>
</template>
<script>
import { EventBus } from "../event-bus.js";
export default {
  data() {
    return {
      radio1: "1",
      radio2: "1",
      brand: "",
      price1: 0,
      price2: 1000,
      displacement1: 0,
      displacement2: 5
    };
  },
  inject: ["reload"],
  methods: {
    CarPriceChange: function(price) {
      if (price == 1) {
        this.price1 = 0;
        this.price2 = 1000;
      } else if (price == 2) {
        this.price1 = 0;
        this.price2 = 200;
      } else if (price == 3) {
        this.price1 = 200;
        this.price2 = 500;
      } else if (price == 4) {
        this.price1 = 500;
        this.price2 = 1000;
      }
      this.send();
    },
    CarOutputChange: function(otp) {
      if (otp == 1) {
        this.displacement1 = 0;
        this.displacement2 = 5;
      } else if (otp == 2) {
        this.displacement1 = 0;
        this.displacement2 = 1.5;
      } else if (otp == 3) {
        this.displacement1 = 1.6;
        this.displacement2 = 2.5;
      } else if (otp == 4) {
        this.displacement1 = 2.6;
        this.displacement2 = 5;
      }
      this.send();
    },
    send() {
      EventBus.$emit("price1", {
        price1: this.price1
      });
      EventBus.$emit("price2", {
        price2: this.price2
      });
      EventBus.$emit("brand", {
        brand: this.brand
      });
      EventBus.$emit("displacement1", {
        displacement1: this.displacement1
      });
      EventBus.$emit("displacement2", {
        displacement2: this.displacement2
      });
    }
  },
  mounted() {
    EventBus.$on("reset", reset => {
      this.radio1 = "1";
      this.radio2 = "1";
    });
  },
  created() {
    EventBus.$emit("price1", {
      price1: this.price1
    });
    EventBus.$emit("price2", {
      price2: this.price2
    });
    EventBus.$emit("brand", {
      brand: this.brand
    });
    EventBus.$emit("displacement1", {
      displacement1: this.displacement1
    });
    EventBus.$emit("displacement2", {
      displacement2: this.displacement2
    });
  }
};
</script>
<style scoped>
/* 品牌 */
#carBrand {
  list-style-type: none;
}
#carBrand li {
  float: left;
  width: 33.33%;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
}
#container-left #brand {
  height: 200px;
  margin-top: 30px;
}
#brand #carBrand li:hover {
  color: #007bff;
  cursor: pointer;
}
#brand p {
  color: #666;
  margin-top: 15px;
  height: 35px;
  padding-top: 6px;
  padding-left: 10px;
  border-radius: 10px;
}
#brand #carBrand li {
  font-size: 14px;
  color: #666;
}
#outPut p {
  color: #666;
  margin-top: 15px;
  height: 35px;
  padding-top: 6px;
  padding-left: 10px;
  border-radius: 10px;
}
#outPut {
  width: 100%;
  height: 140px;
  margin-top: 40px;
}
#inputOutput {
  margin-left: 5px;
}
#container-left #price {
  width: 100%;
  height: 140px;
  /* border-bottom: 1px solid #ccc; */
}
#price div {
  /* display: block; */
  color: #666;
  margin-top: 15px;
  /* margin-left: 10px; */
  /* border:1px solid #000 */
  height: 35px;
  padding-top: 6px;
  padding-left: 10px;
  border-radius: 10px;
}

#container-left #price #inputPrice {
  margin-left: 5px;
}

#inputPrice {
  /* border:1px solid #000; */
  margin-left: 2px;
  margin-top: 2px;
}
</style>